<template>
  <div class="course-page">
    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
          v-model="searchQuery"
          placeholder="请输入你想搜索的课程"
          clearable
          :prefix-icon="Search"
          style="width: 60%; border-radius: 30px;"
      ></el-input>
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </div>

    <!-- 热门课程 -->
    <div class="carousel-container">
      <el-carousel height="300px" :autoplay="true" indicator-position="outside">
        <el-carousel-item v-for="course in popularCourses" :key="course.id">
          <div class="carousel-item">
            <img :src="course.image" alt="course image" class="carousel-image" />
            <div class="carousel-text">
              <h2>{{ course.title }}</h2>
              <p>{{ course.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 课程分类 -->
    <el-tabs v-model="activeCategory" @tab-click="onCategoryClick" class="category-tabs">
      <el-tab-pane v-for="category in categories" :key="category.categoryId" :label="category.categoryName" :name="category.categoryId">
      </el-tab-pane>
    </el-tabs>

    <!-- 课程列表 -->
    <div class="course-list">
      <el-row :gutter="20">
        <el-col
            v-for="course in filteredCourses"
            :key="course.courseId"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
        >
          <el-card shadow="always" class="course-card">
            <img :src="course.image" alt="course image" class="course-image" />
            <div class="course-info">
              <h3>{{ course.title }}</h3>
              <p>{{ course.description }}</p>
            </div>
            <div class="button-group">
              <el-button type="success" size="mini" @click.stop="joinCourse(course.courseId)">加入课程</el-button>
              <el-button type="primary" size="mini" @click.stop="startLearning(course.courseId)">立即学习</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { getAllCategory, getAllCourses } from '@/apis/course.js';
import { getHotCourses } from '@/apis/hotCourse.js';
import {addStudentCourse} from "@/apis/studentCourses.js";

// 初始化路由
const router = useRouter();

// 搜索框相关
const searchQuery = ref('');

// 当前选中的分类
const activeCategory = ref(0); // 默认选中的分类为“全部”

// 所有分类
const categories = ref([
  { categoryName: '全部', categoryId: 0 }
]);

// 获取所有分类
const AllCategory = async () => {
  const res = await getAllCategory();
  categories.value.push(...res.data);
};

// 初始化所有课程数据
const courseData = ref([]);

// 获取所有课程
const AllCourses = async () => {
  const res = await getAllCourses();
  courseData.value = res.data;
};

// 计算属性：过滤课程
const filteredCourses = computed(() => {
  if (activeCategory.value === 0) {
    // 返回所有课程
    return courseData.value.flatMap(category => category.coursesList);
  } else {
    // 返回当前分类下的课程
    const selectedCategory = courseData.value.find(category => category.categoryId === activeCategory.value);
    return selectedCategory ? selectedCategory.coursesList : [];
  }
});

// 热门课程列表
const popularCourses = ref([]);

// 获取热门课程
const HotCourses = async () => {
  const res = await getHotCourses();
  popularCourses.value = res.data;
};

// 页面加载时执行的操作
onMounted(() => {
  AllCategory();
  AllCourses();
  HotCourses();
});

// 搜索操作
const onSearch = () => {
  activeCategory.value = 0; // 点击搜索时切换分类为“全部”
  console.log(`搜索课程: ${searchQuery.value}`);
  //TODO 实现搜索课程的功能
};

// 分类点击事件
const onCategoryClick = (tab) => {
  activeCategory.value = tab.name; // 更新 activeCategory 为选中的分类 ID
  console.log(`选中分类: ${activeCategory.value}`);
};

// 加入课程操作
const joinCourse =async (courseId) => {
  console.log(`加入课程: ${courseId}`);
  // 这里可以添加加入课程的逻辑
  const res =await addStudentCourse(courseId)
};


// 立即学习操作
const startLearning = (courseId) => {
  console.log(`立即学习课程: ${courseId}`);
  // 这里可以添加立即学习的逻辑
  router.push(`/course/${courseId}`);
};
</script>

<style scoped>
.course-page {
  padding: 30px;
  background-color: #f8f8f8;
}

.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  position: sticky;
  top: 70px;
  z-index: 10;
}

.category-tabs {
  margin-bottom: 30px;
  background-color: snow;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
}

.carousel-container {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.carousel-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
}

.carousel-text h2 {
  font-size: 20px;
  margin: 0;
}

.carousel-text p {
  font-size: 14px;
  margin: 5px 0 0 0;
}

.course-list {
  margin-top: 30px;
}

.course-card {
  border-radius: 10px;
  transition: transform 0.2s;
}

.course-card:hover {
  transform: scale(1.05);
}

.course-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.course-info {
  margin: 10px 0;
}

.button-group {
  display: flex;
  justify-content: space-between;
}
</style>
